<template>
	<view class="goods_list">
		<z-paging ref="paging" v-model="listData" @query="queryPageSearchByHotPlatformApp">
			<template #top>
				<view id="searchBox">
					<view style="background-color: #46ebb0;padding: 20rpx;">
						<view style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
							<view style="width: 100%">
								<u-search v-model="search" @custom="searchfun" @search="searchfun" @clear="clearSearch"
									:show-action="true" action-text="搜索" :animation="false" shape="round" search-icon="search"></u-search>
							</view>
							<view @click="distype==0?distype=1:distype=0">
								<!-- <image :src="'/static/img/goods/dis'+distype+'.png'" style="width: 45rpx;" mode="widthFix"></image> -->
							</view>
						</view>
					</view>
					<u-tabs :current="tabCurrent" :list="tabList" @click="tabClick" :scrollable="true" lineWidth="30"
						lineColor="#80B999" :activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.05)'}"
						:inactiveStyle="{color: '#606266',transform: 'scale(1)'}"></u-tabs>
				</view>
			</template>

			<block v-if="distype==0">
				<view class="d-flex j-sb flex-wrap p10">
					<view v-for="(item,index) in listData" :key="index" class="mybox mb15" @click="gotoDetail(item)">
						<image :src="item.headUrl1.split('&')[0]" mode="aspectFill" class="box_img"></image>
						<view class="d-flex flex-column j-sa p10 box_info">
							<view class="name">{{item.productName}}</view>
							<view class="price f_family_din">¥{{item.productPrice}}</view>
							<view class="realNum">销量：{{item.productDealNum}}</view>
						</view>
					</view>
				</view>
			</block>

			<block v-else>
				<view class="hlbblock Myshadow mb10" style="padding: 20rpx" v-for="(item,index) in listData" :key="index"
					@click="gotoDetail(item)">
					<view style="display: flex;width: 100%;">
						<view class="mr20">
							<image :src="item.headUrl1.split('&')[0]" style="width: 200rpx;height: 190rpx;border-radius: 15rpx"
								mode="aspectFill"></image>
						</view>
						<view class="pt10 pb10 d-flex flex-column j-sb">
							<view style="font-size: 32rpx;color: #33333;font-weight: 500;">
								<view class="linedot">
									{{item.productName}}
								</view>
							</view>
							<view style="display: flex;justify-content: space-between;height: 55rpx;align-items: baseline">
								<view style="color: #333333">
									<text style="font-size: 40rpx;color: #33333;font-weight: 500;">¥{{item. productPrice}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</z-paging>
	</view>
</template>

<script>
	import {
		queryPageSearchByHotPlatformApp
	} from "@/api/index.js"

	export default {
		components: {

		},
		data() {
			return {
				/*底部加载*/
				loading: true,
				/*没有更多*/
				no_more: false,
				/*类别选中*/
				type_active: 0,
				/*价格选中*/
				price_top: false,
				sale_top: false,
				tabList: [{
					name: '豪华车',
				}, {
					name: '家政服务'
				}, {
					name: '奢侈品',
				}, {
					name: '私餐'
				}, {
					name: '高端游'
				}, {
					name: '车辆租赁'
				}, {
					name: '其他商品'
				}],
				tabCurrent: 0,
				/*商品列表*/
				listData: [],
				/*当前页面*/
				page: 1,
				category_id: 0,
				search: '',
				sortType: '',
				sortPrice: 0,
				sortsale: 0,
				list_rows: 10,
				last_page: 0,
				distype: 0,
				pricesort: '',
				salesort: '',
			};
		},
		computed: {
			/*加载中状态*/
			loadingType() {
				if (this.loading) {
					return 1;
				} else {
					if (this.listData.length != 0 && this.no_more) {
						return 2;
					} else {
						return 0;
					}
				}
			}
		},

		onLoad(opt) {
			if (opt.index) {
				this.tabCurrent = opt.index
			}

			if (opt.search_value) {
				this.search = opt.search_value;
			}
		},
		mounted() {},
		onPullDownRefresh() {},
		methods: {
			queryPageSearchByHotPlatformApp(pageNo, pageSize) {
				queryPageSearchByHotPlatformApp({
					pageIndex: pageNo,
					pageSize: pageSize,
					productType: this.tabCurrent,
					productName: this.search
				}).then(res => {
					// this.listData = res.object.data
					this.$refs.paging.complete(res.object.data);
				})
			},
			searchfun() {
				this.$refs.paging.reload()
			},
			clearSearch(val) {
				// this.queryPageSearchByHotPlatformApp()
				this.$refs.paging.reload()
			},

			tabClick(data) {
				this.tabCurrent = data.index
				this.$refs.paging.reload()
			},

			gotoDetail(data) {
				uni.navigateTo({
					url: "/pages/hot/details?productCode=" + data.productCode
				});
			},

			/*类别切换*/
			tabTypeFunc(e) {
				return
				let self = this;
				self.listData = [];
				self.page = 1;
				self.no_more = false;
				self.loading = true;
				if (e == 2) {
					self.price_top = !this.price_top;
					if (self.price_top == true) {
						self.sortPrice = 0;
						self.pricesort = 'up';
					} else {
						self.sortPrice = 1;
						self.pricesort = 'down';
					}
					self.salesort = '';
					self.sortType = 'price';
				}

				self.type_active = e;
				// self.getData();
			},


			/*可滚动视图区域到底触发*/
			scrolltolowerFunc() {
				let self = this;
				self.bottomRefresh = true;
				self.page++;
				self.loading = true;
				if (self.page > self.last_page) {
					self.loading = false;
					self.no_more = true;
					return;
				}
			},

			goBack() {
				uni.navigateBack({
					delta: 2
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	image {
		display: inline-block;
	}

	.goods_list {
		font-family: Source Han Sans CN, Source Han Sans CN-500 !important;
		background: linear-gradient(179deg, #46ebb0 30%, #ffffff 80%);
		min-height: 100vh;
	}

	.Myshadow {
		background-color: #ffffff;
		// box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
	}

	.mybox {
		height: 580rpx;
		width: 344rpx;
		box-sizing: border-box;
		background: #ffffff;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
		border-radius: 12rpx;
		overflow: hidden;

		.box_img {
			display: inline-block;
			height: 344rpx;
			width: 344rpx;
		}

		.box_info {
			height: 186rpx;
			// width: 344rpx;

			.name {
				color: #333333;
				font-size: 28rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-500;
				font-weight: 500;
				line-height: 48rpx;
			}

			.price {
				color: #333333;
				font-size: 40rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-500;
				font-weight: 500;
			}
			
			.realNum {
				color: #999999;
				font-size: 24rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-500;
				font-weight: 500;
			}
		}
	}
</style>